<template>
    <div class="common-layout" style="height: 100vh">
        <el-container style="height: 100vh">
            <el-aside width="200px" style="background-color: aquamarine">
                <el-sysMenu
                        style="height: 100%;"
                        background-color="rgb(48,65,86)"
                        text-color="#fff"
                        router
                        default-active="2"
                        class="el-sysMenu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                >
                    <el-sub-sysMenu index="1">
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span>Navigator One</span>
                        </template>
                        <el-sysMenu-item-group title="Group One">
                            <el-sysMenu-item index="1-1">item one</el-sysMenu-item>
                            <el-sysMenu-item index="1-2">item two</el-sysMenu-item>
                        </el-sysMenu-item-group>
                        <el-sysMenu-item-group title="Group Two">
                            <el-sysMenu-item index="1-3">item three</el-sysMenu-item>
                        </el-sysMenu-item-group>
                        <el-sub-sysMenu index="1-4">
                            <template #title>item four</template>
                            <el-sysMenu-item index="1-4-1">item one</el-sysMenu-item>
                        </el-sub-sysMenu>
                    </el-sub-sysMenu>
                    <el-sysMenu-item index="2">
                        <el-icon><icon-sysMenu /></el-icon>
                        <span>Navigator Two</span>
                    </el-sysMenu-item>
                    <el-sysMenu-item index="3" disabled>
                        <el-icon><document /></el-icon>
                        <span>Navigator Three</span>
                    </el-sysMenu-item>
                    <el-sysMenu-item index="4">
                        <el-icon><setting /></el-icon>
                        <span>Navigator Four</span>
                    </el-sysMenu-item>
                </el-sysMenu>
            </el-aside>
            <el-container>
                <el-header style="background-color: #67c23a">Header</el-header>
                <el-main style="background-color: dodgerblue">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
    import {ref, reactive} from 'vue'

</script>

<style scoped>

</style>

